<template>
<div>
  <van-nav-bar
    title="收货地址"
    left-arrow
    @click-left="$router.push('/appPerson')"
    :fixed="true" :placeholder="true"
  >
    <template #title>
      <van-search
        v-model="value"
        shape="round"
        background="white"
        placeholder="请输入搜索关键词"
      />
    </template>
  </van-nav-bar>
  <van-tabs @click="onClick" sticky animated v-model="active" offset-top="46px">
    <van-tab title="全部">
      <div v-for="(items,index) in order" :key="items.id">
      <van-card @click="goDetail(items)" :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages" >
        <template #desc>
          <div style="display: flex;align-items: center;height: 88px;position: relative" >
            <div class="two-lines" style="font-size: 14px;margin-right: 10px">{{items.itemDescription}}</div>
            <div style="position: absolute;color: white;padding: 1px;border-radius: 30px;top: 0" v-if="items.status==0" >
              <van-tag color="red">等待付款
                <van-count-down :time="1800000-Math.floor((new Date().getTime() - new Date(items.createTime).getTime()))">
                  <template #default="timeData">
                    <span style="color: white;margin-left: 10px">{{ timeData.minutes }}:{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </van-tag>
            </div>
            <div style="position: absolute;top: 0;font-size: 14px;color: #999999" v-if="items.status==4">已取消</div>
            <div style="position: absolute;top: 0;font-size: 14px;color: #cc3636" v-if="items.status==3">订单完成</div>
            <div style="position: absolute;top: 0;font-size: 14px;color: #22bddc" v-if="items.status==1">已付款，待收货</div>
            <div style="position: absolute;top: 0;font-size: 14px;color: #7ad349" v-if="items.status==2">已收货,待评价</div>
            <div style="margin-left: auto">
              <div>￥{{items.price}}</div>
              <div>共{{items.num}}件</div>
            </div>
          </div>
        </template>
        <template #footer>
          <van-button size="mini" round  v-if="items.status==0">取消订单</van-button>
          <van-button size="mini" round plain v-if="items.status==0" color="red">支付订单</van-button>
          <van-button size="mini" round v-if="items.status==3">删除订单</van-button>
        </template>
      </van-card></div>
    </van-tab>
    <van-tab title="待支付">
      <div v-for="(items,index) in order" :key="items.id">
        <van-card @click="goDetail(items)" :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages" >
          <template #desc>
          <div style="display: flex;align-items: center;height: 88px;position: relative" >
            <div class="two-lines" style="font-size: 14px;margin-right: 10px">{{items.itemDescription}}</div>
            <div style="position: absolute;color: white;padding: 1px;border-radius: 30px;top: 0" :id="'myDiv'+index" >
              <van-tag color="red">等待付款
                <van-count-down :time="1800000-Math.floor((new Date().getTime() - new Date(items.createTime).getTime()))">
                  <template #default="timeData">
                    <span style="color: white;margin-left: 10px"> {{ timeData.minutes }}:{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </van-tag>

            </div>
            <div style="margin-left: auto">
              <div>￥{{items.price}}</div>
              <div>共{{items.num}}件</div>
            </div>
          </div>

        </template>
      </van-card>
      </div>
    </van-tab>
<!--    收货-->
    <van-tab title="待收货">
      <div v-for="(items,index) in order" :key="items.id">
        <van-card @click="goDetail(items)" :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages" >
          <template #desc>
            <div style="display: flex;align-items: center;height: 88px;position: relative" >
              <div class="two-lines" style="font-size: 14px;margin-right: 10px">{{items.itemDescription}}</div>
              <div style="position: absolute;color: white;padding: 1px;border-radius: 30px;top: 0" v-if="items.status==0" >
                <van-tag color="red">等待付款
                  <van-count-down :time="1800000-Math.floor((new Date().getTime() - new Date(items.createTime).getTime()))">
                    <template #default="timeData">
                      <span style="color: white;margin-left: 10px">{{ timeData.minutes }}:{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </van-tag>
              </div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #999999" v-if="items.status==4">已取消</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #cc3636" v-if="items.status==3">订单完成</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #22bddc" v-if="items.status==1">已付款，待收货</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #7ad349" v-if="items.status==2">已收货,待评价</div>
              <div style="margin-left: auto">
                <div>￥{{items.price}}</div>
                <div>共{{items.num}}件</div>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </van-tab>
    <van-tab title="待评价">
      <div v-for="(items,index) in order" :key="items.id">
        <van-card @click="goDetail(items)" :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages" >
          <template #desc>
            <div style="display: flex;align-items: center;height: 88px;position: relative" >
              <div class="two-lines" style="font-size: 14px;margin-right: 10px">{{items.itemDescription}}</div>
              <div style="position: absolute;color: white;padding: 1px;border-radius: 30px;top: 0" v-if="items.status==0" >
                <van-tag color="red">等待付款
                  <van-count-down :time="1800000-Math.floor((new Date().getTime() - new Date(items.createTime).getTime()))">
                    <template #default="timeData">
                      <span style="color: white;margin-left: 10px">{{ timeData.minutes }}:{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </van-tag>
              </div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #999999" v-if="items.status==4">已取消</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #cc3636" v-if="items.status==3">订单完成</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #22bddc" v-if="items.status==1">已付款，待收货</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #7ad349" v-if="items.status==2">已收货,待评价</div>
              <div style="margin-left: auto">
                <div>￥{{items.price}}</div>
                <div>共{{items.num}}件</div>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </van-tab>
    <van-tab title="已取消">
      <div v-for="(items,index) in order" :key="items.id">
        <van-card @click="goDetail(items)" :thumb="items.itemImages.includes(';')?items.itemImages.split(';')[0]:items.itemImages" >
          <template #desc>
            <div style="display: flex;align-items: center;height: 88px;position: relative" >
              <div class="two-lines" style="font-size: 14px;margin-right: 10px">{{items.itemDescription}}</div>
              <div style="position: absolute;color: white;padding: 1px;border-radius: 30px;top: 0" v-if="items.status==0" >
                <van-tag color="red">等待付款
                  <van-count-down :time="1800000-Math.floor((new Date().getTime() - new Date(items.createTime).getTime()))">
                    <template #default="timeData">
                      <span style="color: white;margin-left: 10px">{{ timeData.minutes }}:{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </van-tag>
              </div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #999999" v-if="items.status==4">已取消</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #cc3636" v-if="items.status==3">订单完成</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #22bddc" v-if="items.status==1">已付款，待收货</div>
              <div style="position: absolute;top: 0;font-size: 14px;color: #7ad349" v-if="items.status==2">已收货,待评价</div>
              <div style="margin-left: auto">
                <div>￥{{items.price}}</div>
                <div>共{{items.num}}件</div>
              </div>
            </div>
          </template>
        </van-card>
      </div>
    </van-tab>
  </van-tabs>
</div>
</template>
<script>
import Vue from 'vue';
import {Toast} from "vant";
import { NavBar } from 'vant';
import { Search } from 'vant';
import { Tab, Tabs } from 'vant';
import { Card } from 'vant';
import request from "../../utils/request";
import { Tag } from 'vant';
import { CountDown } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(CountDown);
Vue.use(Tag);
Vue.use(Card);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Search);
Vue.use(NavBar);
export default {
  data(){
    return{
      order:[],
      active:this.$route.query.active?parseInt(this.$route.query.active):0,
      value:null,
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods:{
    goDetail(item){
      this.$router.push({path:'/orderDetail',query:{"itemId":item.orderId}})
    },
    getData(){
      request.post('/order/getData',{active:this.active}).then(resp=>{
        if (resp.code===0){
          this.order=resp.data
        }
      })
    },
    onClick(name, title) {
      if (title=='已取消'){this.active=4}
      if (title=='全部'){this.active=0}
      if (title=='待支付'){this.active=1}
        this.getData()
    },
  }
}
</script>
<style scoped>
.two-lines {
  word-break: break-all;
  margin-left: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
>>> .van-nav-bar .van-icon{
  color: black!important;
}
>>> .van-tab--active{
  color: red;
  font-weight: bold;
  font-size: 18px!important;
}
>>> .van-tabs__line{
  height: 0;
}
>>> .van-tab{
  font-size: 16px;
}
</style>
